<%--
  Created by IntelliJ IDEA.
  User: 懒瑶瑶
  Date: 2022/5/10
  Time: 8:20
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<html>
<head>
    <title>添加员工</title>

<%--    引入css、js--%>
    <link rel="stylesheet" href="${pageContext.request.contextPath}/static/layui/css/layui.css"/>
    <script type="text/javascript" src="${pageContext.request.contextPath}/static/layui/layui.js"></script>
    <script type="text/javascript" src="${pageContext.request.contextPath}/static/js/jquery-3.5.1.min.js"></script>
    <script type="text/javascript" src="${pageContext.request.contextPath}/static/js/ajaxForm.js"></script>

    <script>
        layui.use(['form', 'laydate', 'layer'], function () {
            var form = layui.form, laydate = layui.laydate, layer = layui.layer;
            //定义自定义验证规则
            form.verify({
                v_notallnum:function (val,item) {
                    if (/^\d+\d+\d$/.test(val)){
                        return "姓名不能为数字"
                    }
                    if (!new RegExp("^[a-zA-Z0-9_\u4e00-\u9fa5\\s·]+$").test(val)) {
                        return '姓名不能包含特殊字符！';
                    }
                    if (/(^\_)|(\__)|(\_+$)/.test(val)) {
                        return '姓名首尾不能出现下划线\'_\'！';
                    }
                },
                v_pass:[
                    /^[\S]{6,12}$/,
                    '长度需要在6-12之间'
                ],
                v_phone:[

                ],
                newmobile: function(value){
                    if(value.length != 11){
                        return '新手机号必须为11位合法数字';
                    }
                    var reg = /^1(3|4|5|6|7|8|9)\d{9}$/;
                    if(reg.test(value)){
                        // return '手机号码格式正确';
                    }else{
                        return '非法手机号';
                    }
                },
                numberQq: function(value){
                    if(!/(^$)|^\d+$/.test(value)){
                        return 'QQ号码格式错误';
                    }
                },
                emaliReg: function(value){
                    if(!/(^$)|^([a-zA-Z0-9_\.\-])+\@(([a-zA-Z0-9\-])+\.)+([a-zA-Z0-9]{2,4})+$/.test(value)){
                        return '邮箱格式错误';
                    }
                },
                num_sz:[
                    /(^$)|^\d+$/,
                    '只能填写数字'
                ],
            });
            laydate.render({
                elem:'#datetime',
                type:'date' //指定
            });
            laydate.render({
                elem:'#datetime2',
                type:'date' //指定
            });
            laydate.render({
                elem:'#datetime3',
                type:'date' //指定
            });
            <%--//监听表单的提交--%>
            <%--form.on('submit(formBtn)',function () {--%>
            <%--    $("#form1").ajaxSubmit({--%>
            <%--        type: 'post',--%>
            <%--        url:'${pageContext.request.contextPath}/emp/addemp',--%>
            <%--        // success:function (d) {--%>
            <%--        //     var index = parent.layer.getFrameIndex(window.name);--%>
            <%--        //--%>
            <%--        //     form.render();--%>
            <%--        // }--%>
            <%--    });--%>
            <%--    parent.layer.close(index);--%>
            <%--    parent.layui.table.reload('dome');--%>
            <%--});--%>
            //监听表单提交
            form.on('submit(formBtn)', function () {
                alert("如果提交没反应！请检查身份证号是否正确");
                var formData = new FormData($("#form1")[0]);
                $.ajax({
                    url:'${pageContext.request.contextPath}/emp/addemp',
                    type : 'POST',
                    data : formData,
                    cache: false,
                    async: false,
                    processData : false,  //必须false才会避开jQuery对 formdata 的默认处理
                    contentType : false,  //必须false才会自动加上正确的Content-Type
                    mimeType:"multipart/form-data",

                    success:function(data){

                        // alert(data);
                        var b;
                        var c;
                        // {"msg":"-","a":1,"b":0}
                        //{"msg":"-","a":1}
                        if(data=="{\"msg\":\"-\",\"a\":1}"){
                            var b = 1;
                            var c = 1;
                        }else {
                            var b = 0;
                            var c = 0;
                        }

                        if(b!=0){
                            alert("手机号已经存在,请检查在添加");
                        }else {
                            alert("正在添加！请稍后。。。")
                            setTimeout(function () {
                                alert("添加成功！");
                                var index = parent.layer.getFrameIndex(window.name);
                                parent.layer.close(index);//关闭弹出层
                                parent.location.reload();//重新加载父页面表格
                            }, 2100);
                        }
                    },
                });

                return false;

            });
        });
    </script>
</head>
<body>
    <form class="layui-form" id="form1"  lay-filter="demo" enctype="multipart/form-data" >
    <%--    姓名--%>
        <div class="layui-form-item">
            <label class="layui-form-label" >姓名：</label>
            <div class="layui-input-inline">
                <input type="text" name="empName" class="layui-input" placeholder="请输入姓名" lay-verify="required|v_notallnum"/>
            </div>
            <span style="font-size: 10px;color: red">※</span>
        </div>

        <%--        性别--%>
        <div class="layui-form-item">
            <label class="layui-form-label">性别：</label>
            <div class="layui-input-block">
                <input type="radio" name="sex" value="男" title="男" checked />
                <input type="radio" name="sex" value="女" title="女" />
                <span style="font-size: 10px;color: red;margin-left: 64px">※</span>
            </div>
        </div>
        <%--        出生日期--%>
        <div class="layui-form-item">
            <label class="layui-form-label">出生日期：</label>
            <div class="layui-input-inline">
                <input type="text" id="datetime" name="birthday" class="layui-input" lay-verify="required|date"/>
            </div>
            <span style="font-size: 10px;color: red">※</span>
        </div>
        <%--        身份证号--%>
        <div class="layui-form-item">
            <label class="layui-form-label">身份证号：</label>
            <div class="layui-input-inline">
                <input type="text" name="cardNo" class="layui-input" placeholder="身份证号码" lay-verify="required|identity" />
            </div>
            <span style="font-size: 10px;color: red">※</span>
        </div>
        <%--        籍贯--%>
        <div class="layui-form-item">
            <label class="layui-form-label">籍贯：</label>
            <div class="layui-input-inline">
                <input type="text" name="nation" class="layui-input" placeholder="请输入籍贯" lay-verify="required"  />
            </div>
            <span style="font-size: 10px;color: red">※</span>
        </div>
        <%--        电话--%>
        <div class="layui-form-item">
            <label class="layui-form-label">电话：</label>
            <div class="layui-input-inline">
                <input type="text" name="phone" id="phone" class="layui-input" placeholder="请输入电话" lay-verify="newmobile" />
            </div>
            <span style="font-size: 10px;color: red">※</span>
        </div>
        <%--        入职日期--%>
        <div class="layui-form-item">
            <label class="layui-form-label">入职日期：</label>
            <div class="layui-input-inline">
                <input type="text" id="datetime2" name="hireDay" class="layui-input" lay-verify="required|date"/>
            </div>
            <span style="font-size: 10px;color: red">※</span>
        </div>
        <%--        离职日期--%>
        <div class="layui-form-item">
            <label class="layui-form-label">离职日期：</label>
            <div class="layui-input-inline">
                <input type="text" id="datetime3" name="fireDay" class="layui-input" lay-verify="required|date"/>
            </div>
            <span style="font-size: 10px;color: red">※</span>
        </div>
        <%--     部门--%>
        <div class="layui-form-item">
            <label class="layui-form-label">部门：</label>
            <div class="layui-input-inline">
                <select name="depId">
                    <c:forEach items="${dlist}" var="s">
                        <option value="${s.depid}">${s.depName}</option>
                    </c:forEach>
                </select>
            </div>
        </div>
        <%--        职务--%>
        <div class="layui-form-item">
            <label class="layui-form-label">职务：</label>
            <div class="layui-input-inline">
                <select name="postId">
                    <c:forEach items="${plist}" var="s">
                        <option value="${s.postId}">${s.postName}</option>
                    </c:forEach>
                </select>
            </div>
        </div>
        <%--        QQ号码--%>
        <div class="layui-form-item">
            <label class="layui-form-label">QQ号码：</label>
            <div class="layui-input-inline">
                <input type="text" name="qqCode" class="layui-input" placeholder="请输入QQ号码" lay-verify="numberQq"/>
            </div>
        </div>
        <%--        微信--%>
        <div class="layui-form-item">
            <label class="layui-form-label">微信：</label>
            <div class="layui-input-inline">
                <input type="text" name="weixin" class="layui-input" placeholder="请输入微信号/手机号" />
            </div>
        </div>
        <%--        邮箱--%>
        <div class="layui-form-item">
            <label class="layui-form-label">邮箱：</label>
            <div class="layui-input-inline">
                <input type="text" name="email" class="layui-input" placeholder="请输入邮箱"  lay-verify="emaliReg"/>
            </div>
        </div>
        <%--        婚姻状况--%>
        <div class="layui-form-item">
            <label class="layui-form-label">婚姻状况：</label>
            <div class="layui-input-block">
                <input type="radio" name="married" value="未婚" title="未婚" checked />
                <input type="radio" name="married" value="已婚" title="已婚" />
                <input type="radio" name="married" value="离异" title="离异" />
                <input type="radio" name="married" value="丧偶" title="丧偶" />
            </div>
        </div>
        <%--        毕业学校--%>
        <div class="layui-form-item">
            <label class="layui-form-label">毕业学校：</label>
            <div class="layui-input-inline">
                <input type="text" name="university" class="layui-input" placeholder="请输入学校名称"/>
            </div>
        </div>
        <%--        专业--%>
        <div class="layui-form-item">
            <label class="layui-form-label">专业：</label>
            <div class="layui-input-inline">
                <input type="text" name="major" class="layui-input" placeholder="请输入专业名称"/>
            </div>
        </div>
        <%--        学历--%>
        <div class="layui-form-item">
            <label class="layui-form-label">学历：</label>
            <div class="layui-input-inline">
                <input type="text" name="education" class="layui-input" placeholder="中专/高中/大专/研究生等"/>
            </div>
        </div>
        <%--        地址--%>
        <div class="layui-form-item">
            <label class="layui-form-label">家庭地址：</label>
            <div class="layui-input-inline">
                <input type="text" name="address" class="layui-input" placeholder="省/市/县(市)"/>
            </div>
        </div>
        <%--        说明--%>
        <div class="layui-form-item">
            <label class="layui-form-label">说明：</label>
            <div class="layui-input-inline">
                <input type="text" name="remark" class="layui-input" placeholder="不用太详细"/>
            </div>
        </div>
        <%--        开户银行--%>
        <div class="layui-form-item">
            <label class="layui-form-label">开户银行：</label>
            <div class="layui-input-inline">
                <input type="text" name="bank" class="layui-input" placeholder="工商/招商/农业等"/>
            </div>
        </div>
        <%--        账户名称--%>
        <div class="layui-form-item">
            <label class="layui-form-label">账户名称：</label>
            <div class="layui-input-inline">
                <input type="text" name="accountName" class="layui-input" placeholder="请输入账户名称"/>
            </div>
        </div>
        <%--        账号--%>
        <div class="layui-form-item">
            <label class="layui-form-label">银行卡号：</label>
            <div class="layui-input-inline">
                <input type="text" name="bankNumber" class="layui-input" placeholder="请输入银行卡号" lay-verify="num_sz"/>
            </div>
        </div>
        <%--        支付宝账号--%>
        <div class="layui-form-item">
            <label class="layui-form-label">支付宝：</label>
            <div class="layui-input-inline">
                <input type="text" name="alipay" id="alipay" class="layui-input" placeholder="请输入支付宝账号"/>
            </div>
        </div>

        <%--        密码--%>
        <div class="layui-form-item">
            <label class="layui-form-label">登录密码：</label>
            <div class="layui-input-inline">
<%--                disabled readonly class="layui-input layui-disabled" placeholder="默认密码:123456"--%>
<%--                <input type="text" name="password" class="layui-input" placeholder="请输入密码"/>--%>
                <input type="text" name="password" disabled readonly class="layui-input layui-disabled" placeholder="默认密码:123456"/>
            </div>
        </div>
        <%--        状态--%>
        <div class="layui-form-item">
            <label class="layui-form-label">状态：</label>
            <div class="layui-input-block">
                <input type="radio" name="status" value="1" title="启用" checked />
                <input type="radio" name="status" value="2" title="禁用" />
            </div>
        </div>

        <%--        头像--%>
        <div class="layui-form-item">
            <label class="layui-form-label">头像：</label>
            <input  style="width: 150px" type="file" id="file" name="file"/>
        </div>

<%--        <div class="layui-form-item">--%>
<%--            <div class="layui-upload">--%>
<%--                <button type="button" class="layui-btn layui-btn-normal  layui-btn-sm" id="test1" style="margin-left: 30px">头像</button>--%>
<%--                <img name="file" style="width: 50px;height: 50px;margin-left: 18px" class="layui-upload-img" id="demo1"/>--%>
<%--            </div>--%>
<%--        </div>--%>

        <%--        提交--%>
        <div class="layui-form-item">
            <div class="layui-input-block">
                <button class="layui-btn  layui-btn-normal " lay-submit lay-filter="formBtn">提交</button>
                <button type="reset" class="layui-btn layui-btn-primary">重置</button>
            </div>
        </div>
    </form>
<%--    <script src="//res.layui.com/layui/dist/layui.js" charset="utf-8"></script>--%>
<%--    <!-- 注意：如果你直接复制所有代码到本地，上述 JS 路径需要改成你本地的 -->--%>
<%--    <script>--%>
<%--        layui.use(['upload', 'element', 'layer'], function(){--%>
<%--            var $ = layui.jquery--%>
<%--                ,upload = layui.upload--%>
<%--                ,element = layui.element--%>
<%--                ,layer = layui.layer;--%>

<%--            //常规使用 - 普通图片上传--%>
<%--            var uploadInst = upload.render({--%>
<%--                elem: '#test1'--%>
<%--                ,url: 'https://httpbin.org/post' //此处用的是第三方的 http 请求演示，实际使用时改成您自己的上传接口即可。--%>
<%--                ,before: function(obj){--%>
<%--                    //预读本地文件示例，不支持ie8--%>
<%--                    obj.preview(function(index, file, result){--%>
<%--                        $('#demo1').attr('src', result); //图片链接（base64）--%>
<%--                    });--%>

<%--                    // element.progress('demo', '0%'); //进度条复位--%>
<%--                    // layer.msg('上传中', {icon: 16, time: 0});--%>
<%--                }--%>
<%--                ,done: function(res){--%>
<%--                    //如果上传失败--%>
<%--                    if(res.code > 0){--%>
<%--                        return layer.msg('上传失败');--%>
<%--                    }--%>
<%--                    //上传成功的一些操作--%>
<%--                    //……--%>
<%--                    $('#demoText').html(''); //置空上传失败的状态--%>
<%--                }--%>
<%--                ,error: function(){--%>
<%--                    //演示失败状态，并实现重传--%>
<%--                    var demoText = $('#demoText');--%>
<%--                    demoText.html('<span style="color: #FF5722;">上传失败</span> <a class="layui-btn layui-btn-xs demo-reload">重试</a>');--%>
<%--                    demoText.find('.demo-reload').on('click', function(){--%>
<%--                        uploadInst.upload();--%>
<%--                    });--%>
<%--                }--%>
<%--            });--%>
<%--        });--%>
<%--    </script>--%>
</body>
</html>
